
<meta charset="UTF-8">

<div id="querygroup">
    <div class="full">
        <h3 class="h3-title">{{$t("bgMgr.queryGroup")}}</h3>
        <ul>
            <li>
                <i-input v-model.trim="queryParameter"></i-input>
            </li>
            <li>
                <i-button type="primary"  @click="handlerClickQuery">{{$t("reportForm.query")}}</i-button>
            </li>
        </ul>
        <div>
            <i-table :columns="columnsList" :data="tableData" height="520" :loading="loading"></i-table>
        </div>
        <div class="my-page" style="margin: 5px 0;">
            <Page :total="total" :page-size="10" :current="currentIndex" @on-change="changePage"></Page>
        </div>

        <Modal v-model="modal" width="900" title="编辑分组">
            <div style="width:850px;margin:10px auto">
                <Row style="margin: 10px 0">
                        <i-col span="4" style="height: 100%;text-align:right;line-height:32px;" :offset="2"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("group.groupName")}} : &nbsp;</i-col>
                        <i-col span="8">
                            <i-input v-model.trim="groupname"></i-input>
                        </i-col>
                        <i-col span="10" style="height: 100%;line-height:32px;padding-left:20px;">
                            <span>
                                <Icon type="star"></Icon> {{$t("group.groupNameTip")}}
                            </span>
                        </i-col>
                </Row>

                <Row style="margin: 10px 0">
                        <i-col span="4" style="height: 100%;text-align:right;line-height:32px;" :offset="2"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("group.mintime")}} : &nbsp;</i-col>
                        <i-col span="8">
                            <input-number :max="3600" :min="30" :step="30" v-model="mintime" style="width: 210px;"></input-number>&nbsp;s
                        </i-col>
                        <i-col span="10" style="height: 100%;line-height:32px;padding-left:20px;">
                            <span>
                                <Icon type="star"></Icon> {{$t("group.mintimeTip")}}
                            </span>
                        </i-col>
                </Row>

                <Row style="margin: 10px 0">
                        <i-col span="4" style="height: 100%;text-align:right;line-height:32px;" :offset="2"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("group.maxtime")}} : &nbsp;</i-col>
                        <i-col span="8">
                            <input-number :max="3600" :min="30" :step="30" v-model="maxtime" style="width: 210px;"></input-number>&nbsp;s
                        </i-col>
                        <i-col span="10" style="height: 100%;line-height:32px;padding-left:20px;">
                            <span>
                                <Icon type="star"></Icon> {{$t("group.maxtimeTip")}}
                            </span>
                        </i-col>
                </Row>


                <Row style="margin: 10px 0">
                        <i-col span="4" style="height: 100%;text-align:right;line-height:32px;" :offset="2">{{$t("group.userCount")}} : &nbsp;</i-col>
                        <i-col span="8">
                            <i-input v-model.trim.number="usercount"></i-input>
                        </i-col>
                        <i-col span="10" style="height: 100%;line-height:32px;padding-left:20px;">
                            <span>
                                <Icon type="star"></Icon> {{$t("group.userCountTip")}}
                            </span>
                        </i-col>
                </Row>

                <Row style="margin: 10px 0">
                        <i-col span="4" style="height: 100%;text-align:right;line-height:32px;" :offset="2">{{$t("group.devCount")}} : &nbsp;</i-col>
                        <i-col span="8">
                            <i-input v-model.trim.number="devicecount"></i-input>
                        </i-col>
                        <i-col span="10" style="height: 100%;line-height:32px;padding-left:20px;">
                            <span>
                                <Icon type="star"></Icon> {{$t("group.devCountTip")}}
                            </span>
                        </i-col>
                </Row>

                <Row style="margin: 10px 0">
                        <i-col span="6" :offset="6">
                            <i-button style="width: 100%" @click="handleSubmit">{{$t("bgMgr.submit")}}</i-button>
                        </i-col>
                        <i-col span="6" :offset="1">
                            <i-button style="width: 100%" @click="resetInfo">{{$t("bgMgr.reset")}}</i-button>
                        </i-col>
                </Row>
            </div>
            <div slot="footer" style="height:20px;"></div>
        </Modal>
    </div>
    <script>
        
vueInstanse=new Vue({
            el:"#querygroup",
            i18n: utils.getI18n(),
            data:{
                modal:false,
                editDeviceIndex:null,
                queryTableData:[],
                loading:true,
                delGroupObj:{},
                monitorPerson:[],
                monitorPersonList:[],
                total:0,
                currentIndex:1,
                queryParameter:"",
                recordsList:[],
                tableData:[],
                columnsList:[
                    {
                        title: vRoot.$t("group.groupName"),
                        key: 'groupname'
                    },
                    {
                        title: vRoot.$t("group.userCount"),
                        key: 'usercount'
                    },
                    {
                        title: vRoot.$t("group.devCount"),
                        key: 'devicecount'
                    },
                    {
                            title: vRoot.$t("bgMgr.action"),
                            key: 'action',
                            width: 220,
                            render: function(h, params) {
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: function() {
                                                vueInstanse.editDeviceIndex = params.index;
                                                editObject = params.row;
                                                vueInstanse.setGroupInfo();
                                                vueInstanse.modal = true;
                                            }
                                        }
                                    }, vRoot.$t("bgMgr.edit")),

                                    h('Poptip', {
                                        props: {
                                            confirm: true,
                                            title: vRoot.$t("message.confirmDel")
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            'on-ok': function () {
                                                vueInstanse.del(params.row.groupid);
                                            }
                                        }
                                    },[
                                    h('Button', {
                                            props: {
                                            type: 'error',
                                            size: 'small'
                                            }
                                        },vRoot.$t("bgMgr.delete")) 
                                    ]) 
                                ]);
                            }
                        }
                ]
                        ,
                groupname:"",
                mintime:30,
                maxtime:3600,
                usercount:"",
                devicecount:"",
                groupname:"",            
            },
            methods:{
                handlerClickQuery () {
                    var self = this;
                    var queryTableData = [];
                    var queryParameterLowerCase = this.queryParameter.toLowerCase();
                    if (!self.queryParameter) return;
                    this.recordsList.forEach(function (record) {
                        var groupname = record.groupname;
                        if (
                            groupname.indexOf(self.queryParameter) != -1 || 
                            record.pinYin.indexOf(queryParameterLowerCase) != -1 ||
                            record.firstLetter.indexOf(queryParameterLowerCase) != -1 
                        ){        
                            queryTableData.push(record);
                        }
                    })
                    this.currentIndex = 1;
                    this.queryTableData = queryTableData;
                    this.tableData = this.queryTableData.slice(0,10);
                    this.total = this.queryTableData.length;
                },
                queryAllgroupsInfo:function(){
                    var url = myUrls.queryGroupByUser();
                    utils.sendAjax(url,{},this.doQueryAllgroupsInfo);
                },
                doQueryAllgroupsInfo:function(resp){
                    if(resp.status === 0){
                        this.recordsList = resp.grouplist !==null ? resp.grouplist : [];
                        this.recordsList.forEach(function (group) { 
                            group.pinYin = __pinyin.getPinyin(group.groupname);
                            group.firstLetter = __pinyin.getFirstLetter(group.groupname);
                        });
                        this.total = this.recordsList.length;
                        this.tableData = this.recordsList.slice( 0 , 10);
                    }
                    this.loading = false;
                },
                del:function(groupid){
                    var me = this;
                    var url = myUrls.deleteGroup();
                    var data = { groupid:groupid };
                    utils.sendAjax(url,data,function(resp){
                        if(resp.status == 0){
                            me.tableData.forEach(function(item,index){
                                if(item.groupid == groupid){
                                    me.$delete(me.tableData,index)
                                }
                            });

                            me.recordsList.forEach(function(item,index){
                                if(item.groupid == groupid){
                                    me.$delete(me.recordsList,index)
                                }
                            });

                            me.total = me.recordsList.length;
                            me.tableData = me.recordsList.slice( me.currentIndex - 1 , 10);
                            
                            me.$Message.success(me.$t("message.deleteSucc"));
                        }else{
                            me.$Message.error(resp.cause);
                        }
                    });
                },
                getUserInfoList:function(){
                    var url = myUrls.queryUser();
                    utils.sendAjax(url,{},this.doUserInfoList);
                },
                doUserInfoList:function(resp){               
                    var me = this;
                    if(resp.status == 0 && resp.userlists != null){
                        resp.userlists.forEach(function (item) { 
                            if(item.usertype >= 10){
                                me.monitorPersonList.push({
                                    label:item.username,
                                    value:item.username
                                })
                            }
                        });
                    }
                },

                handleSubmit:function(){
                    if(this.companyid == ""){
                        this.$Message.error(this.$t("message.selectCustomersTip"));
                        return;
                    };
                    if(this.groupname == ""){
                        this.$Message.error(this.$t("message.fillGroupNameTip"));
                        return;
                    };
                    var url = myUrls.editGroup() ,me = this;
                    var data = {
                        groupid:editObject.groupid,
                        groupname:this.groupname,
                        mintime:this.mintime,
                        maxtime:this.maxtime,
                        groupname:this.groupname,
                        companyid:this.companyid,
                    };
                    if(this.usercount == ""){
                        data.usercount = 0;
                    }else{
                        data.usercount = this.usercount;
                    }
                    if(this.devicecount == ""){
                        data.devicecount = 0;
                    }else{
                        data.devicecount = this.devicecount;
                    }
                    utils.sendAjax(url,data,function (resp) { 
                        if(resp.status == 0){
                            var newData = Object.assign(editObject,data);
                            me.tableData[me.editDeviceIndex] = newData; 
                            utils.changeSingleItemData(me.recordsList,newData,'groupid');
                            me.$Message.success(me.$t("message.changeSucc"));
                        }else{
                            me.$Message.error(resp.cause);
                        }
                    });
                },
                resetInfo:function(){
                    this.groupname = "";
                    this.mintime = 30;
                    this.maxtime = 3600;
                    this.usercount = "";
                    this.devicecount = "";
                    this.groupname = "";
                },
                setGroupInfo:function(){
                    this.groupname    = editObject.groupname;
                    this.mintime      = editObject.mintime;
                    this.maxtime      = editObject.maxtime;
                    this.usercount    = editObject.usercount;
                    this.devicecount  = editObject.devicecount;
                    this.groupname    = editObject.groupname;
                }
            },
            mixins:[mixIn],
            mounted:function(){
               this.queryAllgroupsInfo();
               this.getUserInfoList();
            }
        })
    </script>
</div>




